<template>
  <div class="home">
    <TheHeader :user="user" />
    <div class="main-content">
      <AppSidebar @navigate="handleNavigation" />
      <router-view />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import TheHeader from '../components/TheHeader.vue'
import AppSidebar from '../components/AppSidebar.vue'

const user = ref({
  userName: '未登录用户', // 默认用户名
  roleId: 0 // 默认非会员
})

onMounted(() => {
  //从本地存储获取用户信息
  const userData = localStorage.getItem('userInfo');
  if (userData) {
    user.value = JSON.parse(userData);
  }
})

const handleNavigation = (path) => {
  console.log('Navigating to:', path)
}
</script>

<style scoped>
.home {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.main-content {
  display: flex;
  flex: 1;
  overflow: hidden;
}
</style>